<template>
  <view class="verify main-box feat-grid">

    <view class="verify-top">
      <u-notice-bar mode="horizontal" type="error" speed="100" font-size="24" padding="12rpx 20rpx" :list="renderData.topList"></u-notice-bar>
    </view>
    <view class="verify-head fx-col-c mt30">
<!--      <uv-upload ref="up1" :max-size="5 * 1024 * 1024" max-count="1"
                 name="image" :header="renderData.formHeader" :action="action" @on-success="upBack" @on-error="upError" :auto-upload="false"
      >
      </uv-upload>-->

      <u-upload ref="up1" class="verify-head-img"
                :max-size="2 * 1024 * 1024"
                :limitType="renderData.limitType"
                :custom-btn="false"
                :show-upload-list="true"
                :auto-upload="false"
                :action="action">
      </u-upload>

      <view class="verify-head-prompt">
        <view>上传营业执照</view>
        <view>格式为jpg,png,需小于2M</view>
      </view>
    </view>

    <view class="verify-form">
      <uv-form :model="formData" label-position="top" ref="formDom" :error-type="['toast']"
      >
        <uv-form-item label="企业名称"  prop="enterpriseName" required :border-bottom="false">
          <view class="verify-form-input">
            <uv-input placeholder="请输入企业名" v-model="formData.name" />
          </view>
        </uv-form-item>
        <uv-form-item label="组织机构代码" prop="code" required :border-bottom="false">
          <view class="verify-form-input">
            <uv-input placeholder="请输入组织机构代码" v-model="formData.name" />
          </view>
        </uv-form-item>
        <uv-form-item label="门店名称" prop="name" required :border-bottom="false">
          <view class="verify-form-input">
            <uv-input placeholder="请输入门店名" v-model="formData.name" />
          </view>
        </uv-form-item>
        <uv-form-item label="门店电话" prop="call" required :border-bottom="false">
          <view class="verify-form-input">
            <uv-input class=""   placeholder="请输入门店电话" v-model="formData.call" />
          </view>
        </uv-form-item>
        <uv-form-item label="门店地址" prop="address" required :border-bottom="false">
          <view class="verify-form-input">
            <uv-input disabled="true" class=""   placeholder="请选择门店地址" v-model="formData.call">
              <template #suffix>
                <view class="address-input-icon"><uv-icon size="30" name="arrow-right"></uv-icon></view>
              </template>
            </uv-input>
          </view>
        </uv-form-item>
<!--        <uv-form-item label="" prop="message" :border-bottom="false">
          <view class="verify-form-textarea">
            <uv-input height="150" placeholder="请输入您要留言的内容" type="textarea" v-model="formData.message" />
          </view>
        </uv-form-item>-->
      </uv-form>
    </view>

    <view class="verify-logo">
      <view class="verify-logo-title fx-row-s"><view>门店LOGO</view> <view class="verify-logo-description ml10"> (建议1:1比例)</view></view>
      <u-upload ref="up2" class="verify-head-img2"
                :max-size="2 * 1024 * 1024"
                :limitType="renderData.limitType"
                :custom-btn="false"
                :show-upload-list="true"
                :auto-upload="false"
                :action="action">
      </u-upload>
    </view>


    <button @click="handleSubmit" class="icon-btn-s1-auto icon-btn-b mt60" :loading="renderData.subBtnLoading">确定</button>

    <uv-toast ref="loginToast"></uv-toast>
    <toast></toast>
  </view>

  <!-- #ifdef MP-WEIXIN -->
  <!-- #endif -->
</template>


<script setup>
import { reactive, ref,computed} from "vue";
import { ossImage,jump } from '@/utils/index'
import { header,color } from '@/enums/constants';
import { onLoad,onReady } from "@dcloudio/uni-app";
import loginApi from "@/apis/login";
import { userStore } from "@/stores";
import qs from "qs";
const store = userStore();

const up1 = ref();
const loginToast = ref(null);

const renderData = reactive({
  //通知
  topList:['法人及营业执照信息仅用作平台认证使用，不会展示给其他用户！'],
  subBtnLoading:false,

  formHeader:{'Authorization':store.token ? store.token : uni.getStorageSync('token')},
  showUploadList:[],
  lists:[],
  limitType:['png', 'jpg', 'jpeg']
})


//配置form规则
const formDom = ref();
const formData = reactive({
  name:'',
  call:'',
  message:''
});
const rules = {
  name: [
    {
      required: true,
      message: '请输入姓名',
      // 可以单个或者同时写两个触发验证方式
      //trigger: 'blur,change'
    }
  ],
  call: [
    {
      required: true,
      //min: 5,
      message: '请输入电话号码或微信号',
      //trigger: 'change'
    }
  ]
}

const upBack = (res, index, lists, name)=>{
  console.log(res);
  if(res.code == "SUCCESS" && res.data.url){
    console.log(ossImage(res.data.url))
    handleChangeAvatar(res.data.url)
  }else{
    subBtnLoading.value = false;
  }
}
const upError = (res)=>{
  console.log(res);
}

const handleSubmit = ()=>{
  formDom.value.validate((valid) => {
    console.log(valid);
    if (valid) {
      handleApplyUserAuthorize();
    }
  })
}

//发送申请请求
const handleApplyUserAuthorize = ()=>{
  let para = {
    comment: formData.message,
    expireDate: renderData.timeList.val,
    realName: formData.name,
    roleType: renderData.typeList.val,
    scriptId:Number(renderData.scriptId),
    wechatOrTel:formData.call,
    limit:renderData.timeList.currentIndex == 0 ? 1 : 0,
  }
  renderData.subBtnLoading = true;
  scriptApi.applyUserAuthorize(para).then(res=>{
    if(res.code == 'SUCCESS'){

      uni.showToast({
        icon: "success",
        title: "已成功申请!"
      })
      clearData();
      jumpBack();
    }
  }).finally(()=>{
    renderData.subBtnLoading = false;
  })
}
const clearData = ()=>{
  formDom.value.resetFields();
}



onReady(()=>{
  renderData.lists = up1.value.lists;
  formDom.value.setRules(rules);
})

const isReadyLogin=()=>{
  let text = ['请您勾用户选协议','请您输入电话号码','请您输入验证码'];
  let index = undefined;
  if(!isChecked.value){
    index = 0;
  }
  if(!formData.phone){
    index = 1;
  }
  if(!formData.code){
    index = 2;
  }
  if(index === undefined){
    return true;
  }else{
    loginToast.value.show({
      title:text[index],
      type:'warning',
      position:'top'
    })
  }
}
</script>

<style lang="scss" scoped>
.verify {

  &-head{
    padding:30rpx 15rpx 40rpx;
    min-height: 300rpx;
    background-color: $main-text-e;
    //执照
    &-img{
      margin: 0 auto;
      &:deep(.u-list-item){
        //background-color:$main-text-d ;
        border:1px dashed $main-text-c;
      }
    }
    //logo
    &-img2{
      padding:0;
      &:deep(.u-list-item){
        margin:0;
      }
    }
    &-prompt{
      @include main-text5;
      margin: 0 auto;
      @include main-line2;
      text-align: center;
      color:$main-text-b;
    }
  }
  //表单
  &-form{
    @include main-line2;
    &:deep(.u-form-item){
      padding-top:0;
      padding-bottom:20rpx;
    }
    &-input{
      width: 100%;
      background-color:$main-text-d;
      padding:5rpx 15rpx;
      border-radius: 12rpx;
    }
    &-textarea{
      width: 100%;
      margin-left: 9rpx;
      padding:10rpx 15rpx ;
      background-color:$main-text-d;
      border-radius: 12rpx;
    }
  }
  //logo
  .verify-logo{
    &-title{
      @include main-line1;
      padding-bottom: 20rpx;
    }
    &-description{
      @include main-text4;
      color:$main-text-b;
    }
  }

  .address-input{
    font-weight: 500;
    &-icon{
      padding:0 0rpx;
      color:$main-text-b;
    }
  }
}

</style>
